<template>
	<view class="indexview">
		<view class="topBar">
			<hx-navbar :background-color="navbarConfig.background" :fixed="true" :back="true" transparent="show" :color="navbarConfig.color"
			 title="确认信息"></hx-navbar>
		</view>

		<!-- 确认信息 -->
		<view class="order-info">
			<view class="order-info-goto">
				<view class="order-info-goto-1"><text class="zhuang">起</text></view>
				<text class="order-info-goto-2">{{orderInfo.startPointName}}</text>
			</view>
			<view class="order-info-goto">
				<view class="order-info-goto-1"><text class="xie">终</text></view>
				<text class="order-info-goto-2">{{orderInfo.endPointName}}</text>
			</view>

			<u-line color="#101010" margin="20rpx -30rpx" length="690upx"></u-line>

			<view class="order-info-detail">
				<view class="order-info-detail-1">装货时间</view>
				<text class="order-info-detail-2">{{$util.sliceTime(orderInfo.loadingTime)}}</text>
			</view>

			<view class="order-info-detail">
				<view class="order-info-detail-1">所需车型</view>
				<view class="order-info-detail-2">{{orderInfo.carType}}</view>
			</view>

			<view class="order-info-detail">
				<view class="order-info-detail-1">货物类型</view>
				<view class="order-info-detail-2">{{orderInfo.cargoType}}</view>
			</view>

			<view class="order-info-detail">
				<view class="order-info-detail-1">站点距离</view>
				<view class="order-info-detail-2">{{orderInfo.distance}}km</view>
			</view>

			<view class="order-info-detail">
				<view class="order-info-detail-1">保证金</view>
				<view class="order-info-detail-2">¥{{orderInfo.cashDeposit}}</view>
			</view>
			
			<view class="order-info-detail">
				<view class="order-info-center">
					<image class="qrcode" :src="alipayQrcode" mode="scaleToFill"></image>
					支付宝收款码
				</view>
				<view class="order-info-center">
					<image class="qrcode" :src="weixinQrcode" mode="scaleToFill"></image>
					微信收款码
				</view>
			</view>
			
			<view class="order-info-detail">
				<view class="order-info-detail-1">上传支付截图</view>
				<view class="order-info-detail-2">
					<uni-upimg @change="getImageInfo" :upimg_preview="serviceArr" :upload_count="1"></uni-upimg>
				</view>
			</view>
		</view>

		<!-- 缴纳保证金 -->
		<view class="fiexd-btm">
			<text>为保证该单运输的成交及执行，需缴纳保证金</text>
			<u-button class="custom-style" type="primary" @tap="navTo()">缴纳保证金</u-button>
		</view>
	</view>
</template>

<script>
	import uniUpimg from '@/components//uni-upimg/uni-upimg.vue'
	export default {
		components: {
			uniUpimg
		},
		data() {
			return {
				id: '',
				orderInfo: '',
				serviceArr: [],
				alipayQrcode: '',
				weixinQrcode: ''
			}
		},
		onLoad(option) {
			this.id = option.id
			this.loadData()
		},
		methods: {
			loadData() {
				this.$api.request('POST', '/api/order/selectOrderInfoById', {
					id: this.id
				}).then(res => {
					this.orderInfo = res.data
				})
				this.$api.request('POST', '/api/qr/selectQrInfo', {}, false).then(res => {
					this.alipayQrcode = res.data.alipayQrcode
					this.weixinQrcode = res.data.weixinQrcode
				})
			},
			getImageInfo(e) {
				this.serviceArr = e
				console.log(e)
			},
			//缴纳保证金
			navTo() {
				if (this.serviceArr.length < 1) {
					this.$api.msg('请上传支付截图')
				} else {
					this.$api.request('POST', '/api/order/updateOrderByCarOwner', {
						id: this.id,
						prtsc: this.serviceArr[0],
					}).then(res => {
						uni.navigateTo({
							url: '/pages/index/success',
						})
					})
				}
			}
		}
	}
</script>

<style lang="less">
	.indexview {
		position: relative;
		min-height: 100vh;
	}
	
	.qrcode {
		margin: 0 auto 10upx;
		display: block;
		width: 300upx;
		height: 300upx;
	}
</style>
